<template>
    <div class="discover">
        <img :src="activeBannerBackgroundImage" alt="">
           <div class="wrap">
               <div class="wrap-image" @mouseenter="stopActiveImage" @mouseleave="updateImage" @click="jumpUrl"> 
                  <img :src="activeBannerImage" alt="">
               </div>
               <div class="download-client">
                 <a class="side-download" href="javascript:void(0)" @click="downloadHandle"></a>
                 <p>{{downloadTip}}</p>
               </div>
                <div class="btn-left" 
                    @click="leftClickHandler" 
                    @mouseenter="stopActiveImage" 
                    @mouseleave="updateImage"></div>
                    <div class="btn-right" 
                    @click="rightClickHandler" 
                    @mouseenter="stopActiveImage" 
                    @mouseleave="updateImage"></div>
           <div class="dots">
                <a href="javascript:void(0)" v-for="(_,index) in banner" 
                    :style="index === activeIndex && 'background-position: -17px -343px;'"
                    @click="dotsClickHandler(index)"
                    @mouseenter="stopActiveImage"
                    @mouseleave="updateImage"
                    ></a>
           </div>
           </div>
          
    </div>
</template>

<script>
    export default {
        props:{
          downloadTip : {
             type : String,
             default : 'PC 安卓 iPhone WP iPad Mac 六大客户端',
             require : false
          },
          banner : {
            type : Array,
            default : [],
            require : true
          },
          active : {
            type : Number,
            default : 0,
            require : false
          },
          carouseTime : {
            type : Number,
            default : 1000,
            require : false
          },
          direction : {
            type : String,
            default : 'right',
            require : true ,
            validator : function(value){
                if(!['right','left'].includes(value)) {
                    throw new TypeError('参数不合法') 
                } else return true
            }
          }
           
    },
        data() {
            return {
            //   轮播图
             activeBannerImage:'',
            //     轮播背景图
                activeBannerBackgroundImage: '',
            // 轮播图下标
                activeIndex: this.active,
            //     定时器标志
               timer : undefined,
            }
        },
        methods:{
            changeImage(){
                this.activeBannerImage = require(`@/assets/banner/${this.banner[this.activeIndex].bannerImage}`);
                this.activeBannerBackgroundImage = require(`@/assets/banner/${this.banner[this.activeIndex].bannerBackgroundImage}`);
            },
            leftClickHandler(){
                this.activeIndex++;
                this.activeIndex >= this.banner.length ? this.activeIndex = 0 : this.activeIndex;
                this.changeImage();
            },
            rightClickHandler(){
                this.activeIndex--;
                this.activeIndex < 0 ? this.activeIndex = this.banner.length-1 : this.activeIndex;
                this.changeImage();
            },
            dotsClickHandler(index){
               this.activeIndex = index ;
               this.changeImage();
            },
            updateImage(){
                this.timer = window.setInterval(()=>{
                  this.direction === 'right' ? this.leftClickHandler() : this.rightClickHandler()
                },this.carouseTime)
            },
            stopActiveImage(){
               window.clearInterval(this.timer);
            },
            jumpUrl(){
                this.$emit('jumpUrl',)
            },
            downloadHandle(){
               this.$emit('downloadHandle')
            }
        },
        mounted(){
            this.updateImage();
        },
       
    
    }
</script>

<style lang="scss" scoped>
   .discover{
    width: 100%;
    height: 100%;
    position: relative;
    >img{
       position: absolute;
       width: 100%;
       height: 100%;
       left: 0;
       top: 0;
    }
    .wrap{
        width: 982px;
        height: 285px;
        margin: 0 auto;
        position: relative;
        .wrap-image{
            width: 728px;
            height: 100%;
            cursor: pointer;
            img{
                width: 100%;
                height: 100%;         
           }
        }
        .download-client{
            width: 254px;
            height: 100%;
            position: absolute;
            text-align: center;
            color: #8d8d8d;
            font-size: 12px;
            right: 0;
            top: 0;
            z-index: 20;
            background: url(@/assets/banner/download.png);
           
            &:hover .side-download{
                visibility: visible;
            }
            .side-download{
                display: block;
                visibility: hidden;
                width: 215px;
                height: 56px;
                margin: 185px 0 0 19px;
                background-position: 0 9999px;
                text-indent: -9999px;
                background: url(@/assets/banner/download.png) no-repeat;
                background-position: 0 -289px;
                cursor: pointer;
               
            }
            p{
                margin: 10px auto;
            }
        }
    }
    .btn-left,.btn-right{
        position: absolute;
        width: 37px;
        height: 63px;
        background: url(@/assets/banner/banner.png)  0 9999px no-repeat;
        margin-top: -31px;
        text-indent: -9999px;
        top: 50%;
        cursor: pointer;
    }
    .btn-left{
        background-position: 0 -508px;
        right: -68px;
        &:hover{
            background-position: 0 -578px;
        }
    }
    .btn-right{
        left: -68px;
        background-position: 0 -360px;
        &:hover{
            background-position: 0 -430px;
        }
    }
    .dots{
        position: absolute;
        top: 259px;
        left: 0;
        width: 728px;
        height: 20px;
        text-align: center;
        a{
            display: inline-block;
            width: 20px;
            height: 20px;
            background: url(@/assets/banner/banner.png) 0 9999px no-repeat;
            background-position: 3px -343px;
            &:hover{
                background-position: -17px -343px;
            }

        }
    }
   }
</style>